<template>
  <div class="container">
    <el-container>
      <el-header style="padding: 0">
        <el-menu
          mode="horizontal"
          default-active="1"
          text-color="#aaa"
          active-text-color="#36D"
          style="border: 0; display: flex; background-color: white"
        >
          <el-submenu style="background-color: transparent" index="1">
            <template slot="title" style="background-color: transparent"
              ><img src="../assets/brand.png" alt="" style="height: 60px"
            /></template>
            <el-menu-item>新品</el-menu-item>
            <el-menu-item style="color: #ff7979"
              >精选商品 低至六折</el-menu-item
            >
            <el-menu-item>服饰</el-menu-item>
            <el-menu-item>鞋类</el-menu-item>
            <el-menu-item>配饰</el-menu-item>
            <el-menu-item>Collaborations</el-menu-item>
            <el-menu-item>Going out</el-menu-item>
            <el-menu-item>人造皮革</el-menu-item>
            <el-menu-item>Join Life</el-menu-item>
            <el-menu-item>Bershka Creators</el-menu-item>
            <el-menu-item>Drew Creators</el-menu-item>
          </el-submenu>
          <el-menu-item
            style="
              padding: 0 150px 0 0;
              color: black;
              font-size: 32px;
              background-color: transparent;
            "
            >Drew&Bershka</el-menu-item>
          <el-menu-item
            style="
              width: 100%;
              text-align: center;
              background-color: transparent;
            "
          >
            <router-link to="/">
              <img src="../assets/logo.png" alt="" style="height: 50px" />
            </router-link>
          </el-menu-item>
          <el-menu-item index="1" style="background-color: transparent">
            <router-link to="/about">
                <img src="../assets/icon/sousuo.png" alt="" style="height: 25px" />
            </router-link>
          </el-menu-item>
          <el-menu-item style="background-color: transparent">
            <router-link to="/about">
                <input
                type="text"
                v-model="input"
                placeholder="在这里搜索"
                style="
                    height: 40px;
                    background-color: transparent;
                    border: none;
                    border-bottom: 1px solid black;
                "
                />
            </router-link>
          </el-menu-item>
          <el-menu-item index="2" style="background-color: transparent">
            <router-link to="/Login">
              <img
                src="../assets/icon/yonghu.png"
                alt=""
                style="height: 25px"
              />
            </router-link>
          </el-menu-item>
          <el-menu-item index="3" style="background-color: transparent">
            <router-link to="/wishlist">
              <img
                src="../assets/icon/jushoucang.png"
                alt=""
                style="height: 25px"
              />
            </router-link>
          </el-menu-item>
          <el-menu-item index="4" style="background-color: transparent">
            <img
              src="../assets/icon/gouwu.png"
              alt=""
              style="height: 25px"
              @click="value1 = true"
            />
            <Drawer title="我的购物篮" :closable="false" v-model="value1" width=400>
              
              <el-empty
                style="padding: 220px 0"
                description="购物篮为空 您的购物篮还未添加任何商品，探索我们为您准备的一切"
                :image-size="200"
                image=""
              >
                <el-button type="info">探索</el-button>
              </el-empty>
            </Drawer>
          </el-menu-item>
        </el-menu>
      </el-header>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      value1: false,
    };
  },
};
</script>

<style lang="scss">
.container {
  width: 100%;
  
}
</style>
